<template>
    <div class="app-container">
        <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="80px"
            label-position="top"
        >
            <CommonContainer title="基础信息">
                <div style="padding-bottom: 10px">
                    <el-row :gutter="30">
                        <el-col :span="8">
                            <el-form-item
                                label="关联额度申请"
                                prop="applicationNo"
                            >
                                <div @click="chooseQuotaApplication">
                                    <el-input
                                        v-model="form.applicationNo"
                                        placeholder="请选择额度申请"
                                    ></el-input>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="客户名称" prop="leaseeName">
                                <el-input
                                    v-model="quotaApplicationDetail.leaseeName"
                                    placeholder="选择完额度申请自动带出"
                                    disabled
                                ></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item
                                label="客户类型"
                                prop="customerTypeStr"
                            >
                                <el-input
                                    v-model="
                                        quotaApplicationDetail.customerTypeStr
                                    "
                                    placeholder="选择完额度申请自动带出"
                                    disabled
                                ></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="业务类型" prop="businessType">
                                <el-input
                                    v-model="
                                        quotaApplicationDetail.businessType
                                    "
                                    placeholder="选择完额度申请自动带出"
                                    disabled
                                ></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="产品方案" prop="schemeName">
                                <el-input
                                    v-model="quotaApplicationDetail.schemeName"
                                    placeholder="选择完额度申请自动带出"
                                    disabled
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="租赁用途" prop="leasePurpose">
                                <el-input
                                    v-model="
                                        quotaApplicationDetail.leasePurpose
                                    "
                                    placeholder="选择完额度申请自动带出"
                                    disabled
                                ></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item
                                label="申请总台数"
                                prop="applicationTotal"
                            >
                                <el-input
                                    v-model="
                                        quotaApplicationDetail.applicationTotal
                                    "
                                    placeholder="选择完额度申请自动带出"
                                    disabled
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                label="旧车当前估值总额/新车采购总额"
                                prop="applicationTotalAmount"
                            >
                                <el-input
                                    v-model="
                                        quotaApplicationDetail.applicationTotalAmount
                                    "
                                    placeholder="选择完额度申请自动带出"
                                    disabled
                                ></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="模版类型" prop="templateType">
                                <el-select
                                    v-model="
                                        quotaApplicationDetail.templateType
                                    "
                                    placeholder="选择完额度申请自动带出"
                                    style="width: 100%"
                                    disabled
                                >
                                    <el-option
                                        label="租赁模版"
                                        :value="1"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                label="是否带驾"
                                prop="leadingTheDriver"
                            >
                                <el-select
                                    v-model="
                                        quotaApplicationDetail.leadingTheDriver
                                    "
                                    multiple
                                    placeholder="选择完额度申请自动带出"
                                    style="width: 100%"
                                    disabled
                                >
                                    <el-option
                                        v-for="dict in dict.type
                                            .contract_template_edit_type"
                                        :key="dict.value"
                                        :label="dict.label"
                                        :value="parseInt(dict.value)"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div style="margin-top: 10px">
                        <el-table
                            :data="quotaApplicationDetail.cars"
                            :header-cell-style="{
                                background: '#FAFAFA',
                                color: '#000000',
                            }"
                            border
                        >
                            <el-table-column
                                align="center"
                                prop="vehicleManufacturers"
                                label="车辆厂商"
                                min-width="120"
                            >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="vehicleModel"
                                label="车辆车型"
                                min-width="120"
                            >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="vehicleStyle"
                                label="车辆款型"
                                min-width="120"
                            >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="carNo"
                                label="车牌号"
                                min-width="120"
                            >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="vehicleEnergyType"
                                label="车辆能源类型"
                                min-width="120"
                            >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="registrationNature"
                                label="登记性质"
                                min-width="120"
                            >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="applicationType"
                                label="申请类型"
                                min-width="120"
                            >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="leaseTerm"
                                label="租赁期限(月)"
                                min-width="120"
                            >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="rentPaymentMethod"
                                label="租金支付方式"
                                min-width="120"
                            >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="mileageLimit"
                                label="里程限制（公里)"
                                min-width="120"
                            >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="registeredCity"
                                label="上牌城市"
                                min-width="120"
                            >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="registrationFee"
                                label="上牌费"
                                min-width="120"
                            >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="insurancePremium"
                                label="保险费"
                                min-width="120"
                            >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="maintenancePremium"
                                label="维保费"
                                min-width="120"
                            >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="purchaseTax"
                                label="购置税"
                                min-width="120"
                            >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="vehicleAndVesselTax"
                                label="车船税"
                                min-width="120"
                            >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="installationCost"
                                label="加装费用"
                                min-width="120"
                            >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="otherExpenses"
                                label="其他费用"
                                min-width="120"
                            >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="irr"
                                label="IRR（含牌照）"
                                min-width="120"
                            >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="margin"
                                label="保证金"
                                min-width="120"
                            >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="monthlyRent"
                                label="月租金"
                                min-width="120"
                            >
                            </el-table-column>
                          <el-table-column label="首期租金、比例" align="center" prop="firstInstallmentRent" min-width="150px" show-overflow-tooltip>
                            <template v-slot="{row}">
                              <template v-if="row.firstInstallmentRentalRatio">
                                {{ row.firstInstallmentRent }} 、{{ row.firstInstallmentRentalRatio }}%
                              </template>
                              <template v-else>
                                -- 、--
                              </template>

                            </template>
                          </el-table-column>
                          <el-table-column label="残值、比例" align="center" prop="totalApplicationNumber" min-width="120px" show-overflow-tooltip>
                            <template v-slot="{row}">
                              <template v-if="row.residualValueRatio">
                                {{ row.residualValue }} 、 {{ row.residualValueRatio }}%
                              </template>
                              <template v-else>
                                -- 、--
                              </template>

                            </template>
                          </el-table-column>
                            <el-table-column
                                align="center"
                                prop="suggestedPrice"
                                label="厂商指导价"
                                min-width="120"
                            >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="purchasePrice"
                                label="预估采购价"
                                min-width="120"
                            >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="currentValuation"
                                label="当前估值"
                                min-width="120"
                            >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="numberOfApplications"
                                label="申请台数"
                                min-width="120"
                            >
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </CommonContainer>

            <CommonContainer title="原合同模版">
                <div>
                    <el-form-item label="模版名称" prop="oldTemplateName">
                        <div class="flex-row-center">
                            <el-input
                                style="width: 300px"
                                v-model="form.oldTemplateName"
                                placeholder="选择完额度申请自动带出"
                                disabled
                            ></el-input>
                            <el-button
                                v-if="form.oldTemplateId"
                                style="margin-left: 10px"
                                type="text"
                                @click="
                                    handleSeeContractContent(form.oldTemplateId)
                                "
                                >查看</el-button
                            >
                        </div>
                    </el-form-item>
                </div>
            </CommonContainer>

            <CommonContainer v-if="form.applicationNo" title="合同模版修改">
                <div style="margin-top: 10px">
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-form-item
                                label="修改类型"
                                prop="applicationType"
                            >
                                <el-radio-group
                                    v-model="form.applicationType"
                                    @change="changeApplicationType"
                                >
                                    <el-radio
                                        v-for="(
                                            dict, index
                                        ) in dict.type.contract_template_edit_type.filter(
                                            (item) => item.value != 2
                                        )"
                                        :key="dict.value"
                                        :label="parseInt(dict.value)"
                                        ><span>{{ dict.label }}</span></el-radio
                                    >
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <other-effective-template
                                v-if="form.applicationType == 1"
                                ref="otherEffectiveForm"
                                :customer-id="form.applicationCustomer"
                                :curr-template="form.oldTemplateId"
                                :applicationNo="form.applicationNo"
                                @getContractContent="handleSeeContractContent"
                            >
                            </other-effective-template>
                            <customer-company-template
                                v-else-if="
                                    form.applicationType == 3 ||
                                    form.applicationType == 4
                                "
                                ref="customerCompanyEffectiveForm"
                                :customer-id="form.applicationCustomer"
                                :applicationType="form.applicationType"
                                :applicationNo="form.applicationNo"
                                @getContractContent="handleSeeContractContent"
                            >
                            </customer-company-template>
                            <enable-invalid-template
                                v-else-if="form.applicationType == 5"
                                ref="enableInvalidForm"
                                :customer-id="form.applicationCustomer"
                                :applicationNo="form.applicationNo"
                                @getContractContent="handleSeeContractContent"
                            >
                            </enable-invalid-template>
                        </el-col>
                    </el-row>
                </div>
            </CommonContainer>
            <div class="card-wrap flex justify-end card-padding">
                <el-button @click="cancel">取消</el-button>
                <el-button
                    type="primary"
                    v-loading="submitLoading"
                    @click="commitApproval"
                    >提交审批</el-button
                >
            </div>
        </el-form>
        <select-quota-application
            ref="selectQuotaApplication"
            @success="selectQuotaApplicationCallBack"
        ></select-quota-application>
        <common-contract-content
            ref="commonContractContent"
        ></common-contract-content>
    </div>
</template>

<script>
import SelectQuotaApplication from "@/views/contractTemplate/components/SelectQuotaApplication.vue";
import OtherEffectiveTemplate from "@/views/contractTemplate/components/changeTypeForms/OtherEffectiveTemplate.vue";
import CustomerCompanyTemplate from "@/views/contractTemplate/components/changeTypeForms/CustomerCompanyTemplate.vue";
import EnableInvalidTemplate from "@/views/contractTemplate/components/changeTypeForms/EnableInvalidTemplate.vue";
import { templateApplyAdd } from "@/api/contractTemplate/templateUpdate";
import CommonContractContent from "@/views/contractTemplate/components/CommonContractContent.vue";
import { selectQuotaApplicationDetails } from "@/api/contractTemplate/otherContractTemplate";

export default {
    name: "TemplateApplyAdd",
    dicts: ["business_yes_no", "contract_template_edit_type"],
    components: {
        CommonContractContent,
        SelectQuotaApplication,
        OtherEffectiveTemplate,
        CustomerCompanyTemplate,
        EnableInvalidTemplate,
    },
    data() {
        return {
            submitLoading: false,
            form: {
                applicationNo: null,
                applicationCustomer: null,
                applicationCustomerName: null,
                customerTypeStr: null,
                applicationType: 1,
                source: 1,
                planName: null,
                oldTemplateId: null,
                oldTemplateName: null,
                newTemplateId: null,
                newTemplateName: null,
                templateClassification: null,
                remark: null,
                specialAgreement: null,
                onlyThis: null,
                contractTemplate: {},
                annex: null,
                templateExists: 1,
            },
            rules: {
                applicationNo: [
                    {
                        required: true,
                        message: "请关联额度申请",
                        trigger: "change",
                    },
                ],
                applicationType: [
                    {
                        required: true,
                        message: "请选择修改类型",
                        trigger: "blur",
                    },
                ],
            },
            quotaApplicationDetail: {
                leaseeName: null,
                customerTypeStr: null,
                businessType: null,
                schemeName: null,
                leasePurpose: null,
                applicationTotal: null,
                applicationTotalAmount: null,
                templateType: null,
                leadingTheDriver: null,
                cars: [],
            },
        };
    },
    methods: {
        // 选择额度申请
        chooseQuotaApplication() {
            this.$refs.selectQuotaApplication.show(null);
        },
        // 额度申请选择回调
        selectQuotaApplicationCallBack(quotaInfo) {
            console.log("选择的额度申请---", quotaInfo);
            this.getQuotaApplicationDetail(quotaInfo.calcSchemeCode);
        },
        // 获取额度申请详情
        getQuotaApplicationDetail(calcSchemeCode) {
            selectQuotaApplicationDetails(calcSchemeCode).then((res) => {
                this.quotaApplicationDetail = res.data;
                this.form.applicationNo =
                    this.quotaApplicationDetail?.calcSchemeCode;
                this.form.customerTypeStr =
                    this.quotaApplicationDetail?.customerTypeStr;
                this.form.applicationCustomer =
                    this.quotaApplicationDetail?.leaseeId;
                this.form.applicationCustomerName =
                    this.quotaApplicationDetail?.leaseeName;
                this.form.planName = this.quotaApplicationDetail?.schemeName;
                this.form.oldTemplateId =
                    this.quotaApplicationDetail?.templateId;
                this.form.oldTemplateName =
                    this.quotaApplicationDetail?.templateName;
                this.quotaApplicationDetail.leadingTheDriver =
                    this.quotaApplicationDetail?.leadingTheDriver?.split(",");
                console.log("额度申请详情---", this.quotaApplicationDetail);
            });
        },
        handleSeeContractContent(id) {
            if (!this.isNull(id)) {
                this.$refs.commonContractContent.show(id);
            } else {
                this.$message.error("模版id为空,无法查看");
            }
        },
        // 修改申请类型
        changeApplicationType(value) {
            if (value == 1 || value == 5) {
                if (this.isNull(this.form.applicationNo)) {
                    this.form.applicationType = null;
                    this.$message.error("请关联额度申请");
                    return;
                }
            }
            this.form.applicationType = value;
        },

        //取消
        cancel() {
            this.$confirm("确认取消吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.back();
                })
                .finally(() => {});
        },

        //提交审批
        commitApproval() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    const applicationType = this.form.applicationType;
                    let tmpForm = null;
                    if (applicationType == 1) {
                        tmpForm = this.$refs.otherEffectiveForm.saveForm();
                    } else if (applicationType == 3 || applicationType == 4) {
                        tmpForm =
                            this.$refs.customerCompanyEffectiveForm.saveForm();
                    } else if (applicationType == 5) {
                        tmpForm = this.$refs.enableInvalidForm.saveForm();
                    }
                    console.log("子组件传过来的表单-----", tmpForm);
                    if (tmpForm) {
                        this.form.newTemplateId =
                            tmpForm?.newTemplateObj?.value;
                        this.form.newTemplateName =
                            tmpForm?.newTemplateObj?.label;
                        this.form.templateClassification =
                            tmpForm?.newTemplateObj?.templateClassification;
                        this.form.onlyThis = tmpForm?.onlyThis;
                        this.form.specialAgreement = tmpForm?.specialAgreement;
                        this.form.remark = tmpForm?.remark;
                        this.form.annex = tmpForm?.annex;
                        if (applicationType > 2) {
                            this.form.contractTemplate = tmpForm;
                        }
                        console.log("最终表单-----", this.form);
                        this.$refs["form"].validate((valid) => {
                            if (valid) {
                                this.submitLoading = true;
                                templateApplyAdd(this.form)
                                    .then((res) => {
                                        this.$message.success("提交成功");
                                        this.back();
                                    })
                                    .finally((f) => {
                                        this.submitLoading = false;
                                    });
                            }
                        });
                    }
                }
            });
        },

        back() {
            this.$router.back();
            this.$store.dispatch("tagsView/delView", this.$route);
        },
    },
    mounted() {},
};
</script>

<style lang="scss" scoped>
.agreedItem {
    padding: 8px 20px;
    border-radius: 6px;
    border: 1px solid #dadada;
    margin-bottom: 16px;
    height: 106px;
    font-size: 14px;
    color: #333333;

    .titleInfo {
        .ruleTitle {
            font-weight: bold;

            &::before {
                content: "*";
                color: #f5222d;
                position: relative;
                top: 2px;
                margin-right: 4px;
            }
        }
    }

    .agreedContent {
        //margin-top: 15px;
    }
}

::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

.el-form-item {
    margin-bottom: 15px;
    width: 70%;
}
</style>
